<template>
	<view>
		<z-paging ref='paging' v-model="dataList" @query="queryList">
			<view slot='top'>
				<view class="avatar-nick-level-info">
					<view class="back" @click="back">
						<u-icon name='arrow-left' size='40' color='rgba(255,255,255,.8)'></u-icon><text>返回</text>
					</view>
					<view class="avatar-nick-level">
						<view class="avatar">
							<image src="https://www.auok.ltd/background.jpg"></image>
						</view>
						<view class="nick-level">
							<view class="nick">离离原上草</view>
							<text class="level">lv13</text>
						</view>
					</view>
					<view class="info">
						大家好喀什假大空发生酒店房卡酒店房卡快递费喀什快点放假啊看就卡的缴费卡就卡死的JFK
					</view>
					<view class="data-btns">
						<view class="data">
							<view class="wrap">
								<view>199</view>
								<text>粉丝</text>
							</view>
							<view class="wrap">
								<view>208</view>
								<text>关注</text>
							</view>
							<view class="wrap">
								<view>666</view>
								<text>人气</text>
							</view>
						</view>
						<view class="btns" v-if="!flag">
							<view class="follow btn" @click="follow">+关注</view>
							<view class="chat btn" @click="chat">
								<u-icon name="chat" size="34"></u-icon>
							</view>
						</view>
						<view class="edit" v-else>
							<view @click="toModifyInfo">修改资料</view>
						</view>
					</view>

				</view>
				<view class="tabs-wrap">
					<u-tabs :list="tabsList" :is-scroll="false" :current="tabsCurrentIndex" active-color="#ff4273"
						@change="tabsChange">
					</u-tabs>
				</view>
			</view>
			<showMoment :dataList='dataList' page='profileHome' v-if="tabsCurrentIndex === 0"></showMoment>
			<showItem :list="dataList" v-else></showItem>
		</z-paging>

	</view>
</template>

<script>
	import showMoment from '@/components/showMoment.vue'
	import showItem from "@/components/showItem.vue"
	export default {
		components: {
			showMoment,
			showItem
		},
		data() {
			return {
				tabsCurrentIndex: 0,
				tabsList: [{
					name: '动态'
				}, {
					name: '视频'
				}],
				dataList: [],
				request: {
					queryList: function() {
						return Promise.resolve([{
							imgList: ['https://www.auok.ltd/background.jpg',
								'https://www.auok.ltd/background.jpg'
							]
						}, {
							imgList: ['https://www.auok.ltd/avatar.jpg', 'https://www.auok.ltd/avatar.jpg',
								'https://www.auok.ltd/avatar.jpg'
							]
						}, {}])
					}
				},
				flag: ''
			};
		},
		onLoad(e) {
			this.flag = e.flag
			console.log()
		},
		methods: {
			toModifyInfo() {
				uni.navigateTo({
					url: '/pages/mine/profileInfo/profileInfo'
				})
			},
			chat() {

			},
			follow() {

			},
			back() {
				uni.navigateBack({

				})
			},
			queryList(pageNo, pageSize) {
				// console.log(pageNo, pageSize, this.request, this.dataList)
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging

				this.request.queryList({
					pageNo,
					pageSize
				}).then(res => {
					console.log(res)
					//拼接多条数据
					let arr = []
					for (let a = 0; a < 2; a++) {
						arr = arr.concat(res)
					}
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.complete(arr);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			tabsChange(index) {
				this.tabsCurrentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit {
		view {
			background-color: rgba($color: gray, $alpha: .5);
			border-radius: 50rpx;
			padding: 10rpx 20rpx;
			font-size: 26rpx;
		}
	}

	.data-btns {
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.data {
			display: flex;

			// width: 50%;
			.wrap {
				margin-right: 30rpx;

				view {
					margin: 5rpx 0;
				}

				text {
					color: rgba($color: #fff, $alpha: .9);
					display: inline-block;
					transform: scale(.8);
				}
			}

		}

		.btns {
			display: flex;

			.btn {
				margin: 0 15rpx;
				// border: 1px solid;
				text-align: center;
				padding: 5rpx 20rpx;
				border-radius: 25rpx;

			}

			.follow {
				background-color: #fff;
				color: #000;
				font-size: 26rpx;
			}

			.chat {
				background-color: rgba($color: gray, $alpha: .5);
			}
		}
	}

	.back {
		display: flex;
		align-items: center;

		text {
			margin-left: 10rpx;
		}
	}

	.avatar-nick-level-info {
		// height: 450rpx;
		background: url('https://www.auok.ltd/background.jpg');
		background-size: 100% 100%;
		padding: 30rpx;
		color: #fff;

		.avatar-nick-level {
			display: flex;
			align-items: center;
			margin-top: 50rpx;

			.avatar {
				image {
					height: 150rpx;
					width: 150rpx;
					border-radius: 50%;
				}
			}

			.nick-level {
				margin-left: 20rpx;

				.nick {
					font-size: 38rpx;
				}

				.level {
					margin-top: 15rpx;
					display: inline-block;
					background-color: $primaryColor;
					padding: 4rpx 15rpx;
					font-size: 26rpx;
					border-radius: 10rpx;
					transform: scale(.9);
				}
			}

		}

		.info {
			color: rgba($color: #fff, $alpha: .9);
		}


	}
</style>
